<?xml version='1.0' encoding='UTF-8'?>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" 
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets" 
                xmlns:f="http://java.sun.com/jsf/core" 
                xmlns:h="http://java.sun.com/jsf/html" 
                template="/WEB-INF/layout/template_mobile.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core" >

<ui:define name="body">

<style>
	.chance_14 .ui-widget-header{
	background: none repeat scroll 0 0 #98FB98;
	}
	
	.chance_13 .ui-widget-header{
	background: none repeat scroll 0 0 #FFD700;
	}
	
	.sem_chance .ui-widget-header{
	background: none repeat scroll 0 0 #FA8072;
	}
</style>

<h:form id="formMain"> 
<p:poll interval="10" update="tabelaLoteca, cartelas" 
listener="#{bBLoteca.atualizaEntidadesBanco}" global="false"/>

 <p:messages id="msgs"  showDetail="true" autoUpdate="true"/>
	<h:panelGrid columns="1" style="width:100%; border:0px;">
		<p:panelGrid columns="1"   >
		 		<f:facet name="header">
		 			<h:outputText value="Concurso"></h:outputText>
		 		</f:facet>
			
			<h:panelGrid columns="2" style="border:0px;">
			 	<h:outputText value="Concurso: "/>
			 	<p:selectOneMenu value="#{bBLoteca.loteca}" id="lotecasID" converter="lotecaConverter">
			 		<p:ajax event="change" update="formMain" listener="#{bBLoteca.selecionaLoteca}"></p:ajax>
			        <f:selectItems value="#{bBLoteca.lotecas}" var="l"  itemLabel="#{l.numConcurso}" itemValue="#{l}"/>
	            </p:selectOneMenu>
	       </h:panelGrid>
		    
			<p:dataTable id="tabelaLoteca" emptyMessage="Nenhum concurso vigente encontrado. " var="p" value="#{bBLoteca.loteca.partidas}" rowIndexVar="index2" paginator="false" style="width:100%; float:top;">
		 		<f:facet name="header">
		 			<h:outputText value="Concurso N #{bBLoteca.loteca.numConcurso} - Confrontos"/>
		 		</f:facet>
	
				<p:column  style="text-align:center; width:5%; #{p.statusJogo eq 'FINALIZADO'?'background-color:#d0d0d0;':p.statusJogo eq 'EM_ANDAMENTO'?'background-color:#FFFFCC;':''}">
					<f:facet name="header" >
						<h:outputText value=""/>
					</f:facet>
					<h:outputText value="#{p.sequencialJogo}"/>
					<f:facet name="footer">
		       			<h:outputText value="" style="font-weight:bold;"/>
		       		</f:facet>
				</p:column>
				<p:column style="#{p.statusJogo eq 'FINALIZADO'?'background-color:#d0d0d0;':p.statusJogo eq 'EM_ANDAMENTO'?'background-color:#FFFFCC;':''}}">
					<f:facet name="header">
						<h:outputText value="Mandante"/>
					</f:facet>
					<h:outputText value="#{p.time1.nome}"/>
					<f:facet name="footer">
		       			<h:outputText value="" style="font-weight:bold;"/>
		       		</f:facet>
				</p:column>
				<p:column style="text-align:center; width:10%;#{p.statusJogo eq 'FINALIZADO'?'background-color:#d0d0d0;':p.statusJogo eq 'EM_ANDAMENTO'?'background-color:#FFFFCC;':''}">
					<f:facet name="header">
						<h:outputText value=""/>
					</f:facet>
					<h:outputText value="#{p.golTime1} X #{p.golTime2} "/>
					<f:facet name="footer">
		       			<h:outputText value="" style="font-weight:bold;"/>
		       		</f:facet>
				</p:column>
				<p:column style="#{p.statusJogo eq 'FINALIZADO'?'background-color:#d0d0d0;':p.statusJogo eq 'EM_ANDAMENTO'?'background-color:#FFFFCC;':''}">
					<f:facet name="header">
						<h:outputText value="Visitante"/>
					</f:facet>
					<h:outputText value="#{p.time2.nome}"/>
					<f:facet name="footer">
		       			<h:outputText value="" style="font-weight:bold;"/>
		       		</f:facet>
				</p:column>
				<p:column style="text-align:center; width:5%; #{p.statusJogo eq 'FINALIZADO'?'background-color:#d0d0d0;':p.statusJogo eq 'EM_ANDAMENTO'?'background-color:#FFFFCC;':''}">
					<f:facet name="header">
						<h:outputText value=""/>
					</f:facet>
					<h:graphicImage value="/img/bola_rolando.gif" rendered="#{p.statusJogo eq 'EM_ANDAMENTO'}" style="width:20px;"/>
					<h:graphicImage value="/img/relogio.png" rendered="#{p.statusJogo eq 'AGENDADO'}" style="width:18px;"/>
					<h:graphicImage value="/img/apito.png" rendered="#{p.statusJogo eq 'FINALIZADO'}" style="width:20px;"/>
					<f:facet name="footer">
		       			<h:outputText value="" style="font-weight:bold;"/>
		       		</f:facet>
				</p:column>
		 	</p:dataTable>
		
		 	<h:panelGrid columns="1">
				<p:commandButton actionListener="#{bBLoteca.sincronizaLotecaAtual}" value="Sincroniza Loteca Atual" ajax="true" 
						 styleClass="botao" update=":formMain:msgs"/>
			</h:panelGrid>
		
			</p:panelGrid>
			
		
		<h:panelGroup columns="1" id="painelCartelas" style="border:dotted 0px #ffffff;" >
	 	<p:panelGrid columns="1"  style="width:100%;" >
	 		<f:facet name="header">
	 			<h:outputText value="Grupo de Cartelas"></h:outputText>
	 		</f:facet>
	 		<h:panelGrid columns="4" style="border:0px;">
		 		<h:outputText value="Grupo de Cartelas: "/>
		 		<p:selectOneMenu value="#{bBLoteca.grupoCartela}" id="grupoCartelaID" converter="grupoCartelaConverter" rendered="#{not empty bBLoteca.gruposCartelas}">
		 			<p:ajax event="change" update="painelCartelas" listener="#{bBLoteca.selecionaGrupoCartela}"></p:ajax>
		            <f:selectItems value="#{bBLoteca.gruposCartelas}" var="gc"  itemLabel="#{gc.nome}" itemValue="#{gc}"/>
		        </p:selectOneMenu>
		        <p:commandButton value="+" actionListener="#{bBLoteca.preparaCadastraGrupoCartela}" oncomplete="PF('cadGrupoCartelaDialog').show();" id="novoGC"/>
		        <p:tooltip value="Cadastrar Novo Grupo de Cartelas" for="novoGC"/>
	        </h:panelGrid>
	 		
	 		<p:dataGrid var="c" value="#{bBLoteca.cartelas}" columns="3" layout="grid"
        		id="cartelas" >
        	 
        		<p:panel header="Cartela #{c.seqCartela}" styleClass="#{c.chance eq 'CHANCES_14'?'chance_14':c.chance eq 'CHANCES_13'?'chance_13':c.chance eq 'SEM_CHANCES'?'sem_chance':''}">
        				<p:commandLink oncomplete="PF('detalhesCartela').show();"
        					update=":detCartelaForm:cartelaSelecionada">
        					<f:setPropertyActionListener target="#{bBLoteca.cartelaSelecionada}" value="#{c}"></f:setPropertyActionListener>
        					<h:outputText value="Acertos #{c.qtdAcertos}"/>
        				</p:commandLink>
        		</p:panel>
       
			 	
			 </p:dataGrid>
			 
		
			 	<h:panelGrid columns="4">
			 		<p:commandButton actionListener="#{bBLoteca.novaCartela}" value="Nova"
							 styleClass="botao" update=":formMain:painelCartelas"/>
					<p:commandButton actionListener="#{bBLoteca.salvarCartelas}" value="Salvar"
							 styleClass="botao" update=":formMain:msgs"/>
					<p:commandButton actionListener="#{bBLoteca.consultarEstatisticas}" value="Consultar Estatistica"
						 styleClass="botao" oncomplete="PF('estatisticaDialog').show();" update=":estatisticaForm:estatisticaTable"/>
					<p:commandButton actionListener="#{bBLoteca.concluirCartelas}" value="Concluir"
							 styleClass="botao" update=":formMain:msgs, :formMain:painelCartelas" />
					<p:commandButton actionListener="#{bBLoteca.imprimirCartelas}" value="Imprimir"
							 styleClass="botao" />
							 
				</h:panelGrid>
			 
			</p:panelGrid>

		</h:panelGroup>
	</h:panelGrid>
</h:form>

<p:dialog header="Grupo de Cartelas" widgetVar="cadGrupoCartelaDialog">
    <h:form id="cadGrupoCartelas">
    <h:panelGrid columns="2">
   	 	<h:outputText value="Nome:" />
    	<p:inputText value="#{bBLoteca.grupoCartela.nome}"/>
    	<p:commandButton value="Salvar" update=":formMain:painelCartelas" actionListener="#{bBLoteca.salvaGrupoCartela}" oncomplete="PF('cadGrupoCartelaDialog').hide();"/>
    </h:panelGrid>
    </h:form>
    
</p:dialog>

<p:dialog widgetVar="detalhesCartela">

	<f:facet name="header">
		<h:outputText value="Detalhes da Cartela"/>
	</f:facet>
	<h:form id="detCartelaForm">
	
	<p:dataTable var="pt" value="#{bBLoteca.cartelaSelecionada.palpites}"
	rowIndexVar="index" paginator="false" id="cartelaSelecionada"
	style="width:100%; float:left; padding-right:5px; padding-bottom:5px; font-size:32px;"  >
			 		<f:facet name="header">
			 			<h:outputText value="Cartela #{bBLoteca.cartelaSelecionada.seqCartela}"></h:outputText>
			 		</f:facet>
			 		
			 		<p:column style="text-align:center; width:5px;  #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
						<f:facet name="header">
							<h:outputText value=""/>
						</f:facet>
						<h:outputText value="#{pt.partida.sequencialJogo}"/>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       			
			       		</f:facet>
					</p:column>
					<p:column style="text-align:right;width:97px;  #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
						<f:facet name="header">
							<h:outputText value="Coluna 1"/>
						</f:facet>
						<h:outputText value="#{pt.partida.time1.nome}" />
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       			
			       		</f:facet>
					</p:column>
					<p:column style="text-align:center; width:12px;  #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
						<f:facet name="header">
							<h:outputText value=""/>
						</f:facet>
						<p:selectBooleanCheckbox value="#{pt.c1}" rendered="#{not bBLoteca.cartelaSelecionada.concluida}"/>
						<h:graphicImage value="/img/check_cinza_2.png" rendered="#{bBLoteca.cartelaSelecionada.concluida and pt.c1}" style="width:18px;"/>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       			
			       		</f:facet>
					</p:column>
					<p:column style="text-align:center; width:12px;  #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
						<f:facet name="header">
							<h:outputText value=" X "/>
						</f:facet>
						<p:selectBooleanCheckbox value="#{pt.cx}" rendered="#{not bBLoteca.cartelaSelecionada.concluida}"/>
						<h:graphicImage value="/img/check_cinza_2.png" rendered="#{bBLoteca.cartelaSelecionada.concluida and pt.cx}" style="width:18px;"/>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       		</f:facet>
					</p:column>
					<p:column  style="width:12px; text-align:center; #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
						<f:facet name="header">
							<h:outputText value=""/>
						</f:facet>
						<p:selectBooleanCheckbox value="#{pt.c2}" rendered="#{not bBLoteca.cartelaSelecionada.concluida}"/>
						<h:graphicImage value="/img/check_cinza_2.png" rendered="#{bBLoteca.cartelaSelecionada.concluida and pt.c2}" style="width:18px;"/>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       		</f:facet>
					</p:column>
					<p:column  style="width:97px; #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
						<f:facet name="header">
							<h:outputText value="Coluna 2"/>
						</f:facet>
						<h:outputText value="#{pt.partida.time2.nome}"/>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       		</f:facet>
					</p:column>
					<p:column  style="text-align:center; width:42px;  #{not empty pt.acerto and not pt.acerto?'background-color:#FBEFEF;':pt.acerto?'background-color:#D8F6CE;':''}">
						<f:facet name="header">
							<h:outputText value=""/>
						</f:facet>
						<h:graphicImage value="/img/erro.gif" rendered="#{not empty pt.acerto and not pt.acerto}" style="width:20px;"/>
						<h:graphicImage value="/img/sucess.png" rendered="#{pt.acerto}" style="width:18px;"/>
						<h:graphicImage value="/img/bola_rolando.gif" rendered="#{pt.partida.statusJogo eq 'EM_ANDAMENTO'}" style="width:20px;"/>
						<h:graphicImage value="/img/relogio.png" rendered="#{pt.partida.statusJogo eq 'AGENDADO'}" style="width:18px;"/>
						<h:graphicImage value="/img/apito.png" rendered="#{pt.partida.statusJogo eq 'FINALIZADO'}" style="width:20px;"/>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       		</f:facet>
					</p:column>
			 		
			 	</p:dataTable>
    </h:form>
</p:dialog>

<p:dialog resizable="true" widgetVar="estatisticaDialog" width="100%" height="100%" draggable="true" maximizable="true">

	<f:facet name="header">
		<h:outputText value="Estatisticas do Grupo Cartela"/>
	</f:facet>
	<h:form id="estatisticaForm">
	
	<p:dataTable var="ep" value="#{bBLoteca.estatistica.estatisticaPalpites}"
	rowIndexVar="index" paginator="false" id="estatisticaTable"
	style="width:100%; float:left; padding-right:5px; padding-bottom:5px; font-size:30px;"  >
			 		<f:facet name="header">
			 			<h:outputText value="Estatisticas do #{bBLoteca.grupoCartela.nome} concurso #{bBLoteca.loteca.numConcurso}"/>
			 		</f:facet>
			 		
			 		<p:column style="text-align:center; width:5px;">
						<f:facet name="header">
							<h:outputText value=""/>
						</f:facet>
						<h:outputText value="#{ep.partida.sequencialJogo}"/>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       			
			       		</f:facet>
					</p:column>
					<p:column style="text-align:right;width:97px;">
						<f:facet name="header">
							<h:outputText value="Coluna 1"/>
						</f:facet>
						<h:outputText value="#{ep.partida.time1.nome}" />
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       			
			       		</f:facet>
					</p:column>
					<p:column style="text-align:center; width:12px;">
						<f:facet name="header">
							<h:outputText value=""/>
						</f:facet>
							<h:outputText value="#{ep.porcentagemC1}%">
								<f:convertNumber pattern="#,##0.00"/>
							</h:outputText>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       				
			       			
			       		</f:facet>
					</p:column>
					<p:column style="text-align:center; width:12px;">
						<f:facet name="header">
							<h:outputText value=" X "/>
						</f:facet>
						<h:outputText value="#{ep.porcentagemCX}%">
							<f:convertNumber pattern="#,##0.00"/>
						</h:outputText>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       		</f:facet>
					</p:column>
					<p:column  style="width:12px; text-align:center;">
						<f:facet name="header">
							<h:outputText value=""/>
						</f:facet>
						<h:outputText value="#{ep.porcentagemC2}%">
							<f:convertNumber pattern="#,##0.00"/>
						</h:outputText>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       		</f:facet>
					</p:column>
					<p:column  style="width:97px;">
						<f:facet name="header">
							<h:outputText value="Coluna 2"/>
						</f:facet>
						<h:outputText value="#{ep.partida.time2.nome}"/>
						<f:facet name="footer">
			       			<h:outputText value="" style="font-weight:bold;"/>
			       		</f:facet>
					</p:column>
					<f:facet name="footer">
						<p:commandButton actionListener="#{bBLoteca.gerarEstatisticas}" value="Atualizar Estatisticas"
						 styleClass="botao" update=":estatisticaForm:estatisticaTable"/>
					</f:facet>
			 		
			 	</p:dataTable>
			 	
    </h:form>
</p:dialog>

</ui:define>
</ui:composition>